<template>
  <div>
    <img src="/111.png" height="40px">
    <!-- 导航栏 - 添加了下拉菜单功能 -->
    <nav class="navbar">
      <div class="nav-left">
        <img src="/logo.png" class="logo">
      </div>
      <div class="nav-right">
        <!-- 站点介绍下拉菜单 -->
        <div class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle">站点介绍</a>
          <div class="dropdown-menu">
            <a href="https://gs.amazon.cn/north-america?ref=as_cn_ags_hnav_na" class="dropdown-item">北美及拉美站</a>
            <a href="https://gs.amazon.cn/europe?ref=as_cn_ags_hnav_eu" class="dropdown-item">欧洲站</a>
            <a href="https://gs.amazon.cn/japan?ref=as_cn_ags_hnav_jp" class="dropdown-item">日本站</a>
            <a href="https://gs.amazon.cn/australia?ref=as_cn_ags_hnav_au" class="dropdown-item">澳洲站</a>
            <a href="https://gs.amazon.cn/india?ref=as_cn_ags_hnav_in" class="dropdown-item">印度站</a>
            <a href="https://gs.amazon.cn/middle-east?ref=as_cn_ags_hnav_me" class="dropdown-item">中东站</a>
            <a href="https://gs.amazon.cn/singapore?ref=as_cn_ags_hnav_sg" class="dropdown-item">新加坡站</a>
          </div>
        </div>

        <!-- 我要开店下拉菜单 -->
        <div class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle">我要开店</a>
          <div class="dropdown-menu">
            <a href="https://gs.amazon.cn/beginners-guide?ref=as_cn_ags_hnav_bg_t2" class="dropdown-item">跨境新手指南</a>
            <a href="https://gs.amazon.cn/category?ref=as_cn_ags_hnav_cat_t2" class="dropdown-item">海外选品指南</a>
            <a href="https://gs.amazon.cn/sell?ref=as_cn_ags_hnav_sell_t2" class="dropdown-item">开店注册指导</a>
            <a href="https://gs.amazon.cn/perfect-launch?ref=as_cn_ags_hnav_pl_t2" class="dropdown-item">高效运营指南</a>
          </div>
        </div>

        <!-- 资源与服务下拉菜单 -->
        <div class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle">资源与服务</a>
          <div class="dropdown-menu">
            <a href="https://gs.amazon.cn/policy?ref=as_cn_ags_hnav_tools_policy" class="dropdown-item">合规与账户健康</a>
            <a href="https://gs.amazon.cn/category?ref=as_cn_ags_hnav_tools_cate" class="dropdown-item">选品工具与推荐</a>
            <a href="https://gs.amazon.cn/tools?ref=as_cn_ags_hnav_tools_logistic#logistic" class="dropdown-item">物流与仓储</a>
            <a href="https://gs.amazon.cn/tools?ref=as_cn_ags_hnav_tools_brand#branding" class="dropdown-item">打造全球品牌</a>
            <a href="https://gs.amazon.cn/tools?ref=as_cn_ags_hnav_tools_merchandising#merchandising" class="dropdown-item">旺季与流量</a>
            <a href="https://gs.amazon.cn/amazon-business?ref=as_cn_ags_hnav_tools_ab" class="dropdown-item">亚马逊企业购</a>
          </div>
        </div>
        <!-- 卖家资讯下拉菜单 -->
        <div class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle">卖家资讯</a>
          <div class="dropdown-menu">
            <router-link to="work1">
            <a class="dropdown-item">跨境知识荟</a>
            </router-link>
            <a href="https://gs.amazon.cn/sellerstory?ref=as_cn_ags_hnav_sellerstory" class="dropdown-item">卖家故事</a>
            <router-link to="work">
              <a class="dropdown-item">最新资讯</a>
            </router-link>
          </div>
        </div>
        <router-view></router-view>
        <!-- 卖家教育下拉菜单 -->
        <div class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle">卖家教育</a>
          <div class="dropdown-menu">
            <a href="https://gs.amazon.cn/learn/seller-university?ref=as_cn_ags_learn_su" class="dropdown-item">免费线上自学</a>
            <a href="https://gs.amazon.cn/resources/live-broadcast?ref=as_cn_ags_hnav_learn_lb" class="dropdown-item">免费直播互动</a>
            <a href="https://gs.amazon.cn/service/education?ref=as_cn_ags_hnav_learn_edu" class="dropdown-item">付费专业课程</a>
            <a href="https://gs.amazon.cn/learn/center?ref=as_cn_ags_hnav_learn_tc" class="dropdown-item">卖家培训中心</a>
          </div>
        </div>
        <!-- 登录下拉菜单 -->
        <div class="nav-item dropdown">
          <a href="https://sellercentral.amazon.co.uk/ap/signin?clientContext=261-9554158-0695748&openid.pape.max_auth_age=0&openid.return_to=https%3A%2F%2Fsellercentral.amazon.co.uk%2Fgp%2Fhomepage.html%3Fref%3Das_cn_ags_hnav1_eulogin%26initialSessionID%3D000-2149933-1507942%26ld%3DELCNAGS-localhost%253A8080%26pageName%3DCN%253AAS%253AGS-learn-center&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=sc_uk_amazon_v2&openid.mode=checkid_setup&language=zh_CN&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&pageId=sc_amazon_v3_unified&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&ssoResponse=eyJ6aXAiOiJERUYiLCJlbmMiOiJBMjU2R0NNIiwiYWxnIjoiQTI1NktXIn0.k2ZSurDptNffTtlrxlH-U7uVBVcrsmQL8nlwBiOR-bIcc8gJ1eBbVA.dioPSW8BCeD8aoRs.2zoDFgYmtpRd_8LH9o-YbbBrSvu_5UQIMzFYA21_IU2AJWnjmzYEPZn4txqglVvS8nriSu3ITpLCWDV6MnGR4rj5NXyox5-OAEgh5xcxx_kRNZRkZkYA1Ls94EZ08P_YIwZRd_7swBMuyaqswHYJnJA1W6WNQG7y3NP3wJQUmitnW7fO351EKJ2YwFTbZPrIMtWDPZ5X.1DJa48gf9fL5zgbhrSQDvQ" class="nav-link ">登录</a>
        </div>
      </div>
    </nav>

    <!-- 主要内容区 - 保持原有内容不变 -->
    <main>
      <!-- 介绍部分 - 添加了展示图片 -->
      <section class="hero-section">
        <div class="hero-image-container">
          <img src="/大屏1.png" alt="业务增长展示图" class="hero-img">
        </div>
      </section>
      <img src="/222.png" height="380px" style="padding-left: 100px ; padding-top: 10px">
      <!-- 产品表格 -->
      <el-card shadow="hover" style="padding-left: 150px">
        <img src="/333.png" height="600px">
      </el-card>
      <!-- 申请步骤 -->
      <section class="steps-section" style="padding-left: 20px">
        <h2>申请流程</h2>
        <div class="steps">
          <div v-for="(step, index) in steps" :key="index" class="step">
            <div class="step-number">{{ index + 1 }}</div>
            <p class="step-text">{{ step }}</p>
          </div>
        </div>
      </section>
      <h2 style="padding-left: 20px">常见问题</h2>
      <section class="faq-section">
        <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
          <div class="faq-question" @click="toggleAnswer('main', index)">
            {{ faq.question }}
            <span class="toggle-icon">
          {{ activeIndices.main === index ? '−' : '+' }}
        </span>
          </div>
          <div v-show="activeIndices.main === index" class="faq-answer">
            {{ faq.answer }}
          </div>
        </div>
      </section>

      <!-- 第一组扩展问题 -->
      <section class="faq-section">
        <div v-for="(faq, index) in faqs1" :key="index" class="faq-item">
          <div class="faq-question" @click="toggleAnswer('faqs1', index)">
            {{ faq.question }}
            <span class="toggle-icon">
          {{ activeIndices.faqs1 === index ? '−' : '+' }}
        </span>
          </div>
          <div v-show="activeIndices.faqs1 === index" class="faq-answer">
            {{ faq.answer }}
          </div>
        </div>
      </section>

      <!-- 第二组扩展问题 -->
      <section class="faq-section">
        <div v-for="(faq, index) in faqs2" :key="index" class="faq-item">
          <div class="faq-question" @click="toggleAnswer('faqs2', index)">
            {{ faq.question }}
            <span class="toggle-icon">
          {{ activeIndices.faqs2 === index ? '−' : '+' }}
        </span>
          </div>
          <div v-show="activeIndices.faqs2 === index" class="faq-answer">
            {{ faq.answer }}
          </div>
        </div>
      </section>

      <!-- 第三组扩展问题 -->
      <section class="faq-section">
        <div v-for="(faq, index) in faqs3" :key="index" class="faq-item">
          <div class="faq-question" @click="toggleAnswer('faqs3', index)">
            {{ faq.question }}
            <span class="toggle-icon">
          {{ activeIndices.faqs3 === index ? '−' : '+' }}
        </span>
          </div>
          <div v-show="activeIndices.faqs3 === index" class="faq-answer">
            {{ faq.answer }}
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="foot">
        <h3 style="color: white">关于我们</h3>
        <p style="font-size: 13px ; color: white">亚马逊成立于1995年7月，总部在美国西雅图。2015年，亚马逊全球开店业务进入中国，旨在借助亚马逊全球资源，帮助中国卖家抓住跨境电商新机遇，发展出口业务，拓展全球市场，打造国际品牌。目前，亚马逊美国、加拿大、墨西哥、英国、法国、德国、意大利、西班牙、荷兰、瑞典、比利时、爱尔兰、日本、新加坡、澳大利亚、印度、阿联酋、沙特、波兰和巴西等20大海外站点已面向中国卖家开放，吸引数十万中国卖家入驻。</p>
        <p style="color: white">—————————————————————————————————————————————————————————————————————————————————</p>
        <p style="color: white ; align-content: center ; font-size: 10px">京公网安备11010502030232号
          京ICP备11014788号
          © 2025, Amazon Services LLC. All Rights Reserved. An Amazon Company</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const steps = [
  '检查卖家平台融资邀请',
  '选择合适融资方案',
  '安全共享店铺销售数据',
  '完成申请',
  '获得资金'
]

// 使用对象存储各模块的展开索引
const activeIndices = ref({
  main: -1,
  faqs1: -1,
  faqs2: -1,
  faqs3: -1
})

// 改进后的切换方法[2,5](@ref)
const toggleAnswer = (section, index) => {
  activeIndices.value[section] =
    activeIndices.value[section] === index ? -1 : index
}

const faqs = [
  {
    question: '处理申请需要多长时间？',
    answer: '做决定所需的时间可能随融资提供商变化。平均而言，大多数决定会在一个工作日内做出。'
  }
]

const faqs1 = [
  {
    question: '如何提高我的资格水平？',
    answer: '提供商在确定融资资格时，会考虑多种因素，评估卖家是否有持续增长的销售记录，是否提供了最高水平的客户满意度。'
  }
]

const faqs2 = [
  {
    question: '我有机会从哪些第三方贷款方或贷款服务提供商收到贷款？',
    answer: '在中国的亚马逊卖家贷款计划中，目前有四个贷款方或贷款服务提供商：昀数、豆沙包、巨凯沣和迈豹云数。目前，豆沙包是在越南和新加坡的亚马逊卖家贷款计划中的唯一贷款服务提供商。'
  }
]

const faqs3 = [
  {
    question: '我可以同时申请多笔贷款吗？',
    answer: '您可以申请多笔贷款，但您只能在卖家平台中所有经批准的贷款中选择接受一笔。当您在卖家平台中确认选定一笔贷款放款之后，您将不能继续申请其他的贷款机会，也不会再有其他申请获得批准。'
  }
]

</script>

<style>
.faq-section {
  padding-left: 20px;
}
/* 基础样式 */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
}

footer {
  background-color: #232f3e;
  width: 100%;
}

.foot {
  background-color: #232f3e;
}

.footer {
  background-color: #232f3e;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 100px;
  padding-right: 10px;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0px;
}

/* 导航栏样式 - 更新为支持下拉菜单 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.logo {
  height: 40px;
  margin-right: 10px;
  margin-left: 20px;
}

.nav-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-right {
  float: left;
  display: flex;
  gap: 20px;
  font-size: 15px;
  font-weight: 700;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #007bff;
}

/* 下拉菜单样式 */
.dropdown {
  position: relative;
}

.dropdown-toggle::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-item {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

/* 主要内容样式 - 保持不变 */
.hero-section {
  text-align: center;
  padding: 0rem 0;
  background-color: rgba(248, 249, 250, 0.99);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.feature-card {
  padding: 1.5rem;
  border: 1px solid #e3e6e8;
  border-radius: 8px;
  background: white;
}

/* 表格样式 */
.product-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}

.product-table th,
.product-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* 步骤样式 */
.steps {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

/* 常见问题样式 */
.faq-item {
  border: 1px solid #eee;
  margin: 1rem 0;
  border-radius: 8px;
  padding: 1rem;
}

.faq-question {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.toggle-icon {
  font-size: 1.5rem;
}

/* 按钮样式 */
.cta-button {
  background: #ff9900;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-right {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    display: none;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }

  .steps {
    flex-direction: column;
  }

  .product-table {
    overflow-x: auto;
  }
}

/* 新增的图片容器样式 */
.hero-image-container {
  width: 100%;
  height: auto;
  max-height: 500px; /* 根据需求调整最大高度 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5; /* 图片加载前的背景色 */
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充容器 */
  object-position: center; /* 图片居中显示 */
  transition: transform 0.3s ease; /* 添加悬停效果 */
}

/* 可选：添加悬停放大效果 */
.hero-image-container:hover .hero-img {
  transform: scale(1.02);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .hero-image-container {
    max-height: 300px; /* 移动端适当减小高度 */
    margin: 20px;
  }
}

.box-card {
  width: 480px;
}
</style>
